Day20. 網站開發過程(二) Bootstrap介紹、常用語法

2023 iThome 鐵人賽

DAY 20

SideProject30

30天製作RWD個人品牌網站系列第 20 篇

15th鐵人賽 30天製作rwd個人品牌網站 bootstrap bootstrap5 網頁設計

luna0228

2023-10-05 23:15:46

773 瀏覽

分享至

不敢相信，我完成2/3的鐵人賽了！接下來也要加油！
今天開始是一系列的Bootstrap內容，會從最基本的觀念開始，並推薦常用元件及應用、變化。
前面的天數我們談到了這些：
Day3-5. 制定網站內容
 Day6-9. Figma教學
 Day11-18. 切版前知識-VSCode、HTML、CSS、RWD
Day19. 網站開發(共用Layout)

Bootstrap 5

Bootstrap 5
講到RWD響應式網頁就會想到CSS框架，雖然近年越來越多厲害的框架出現，但Bootstrap依舊是目前為止最多人使用的CSS框架。
Bootstrap框架當初出現就是為了實現響應式設計，製作出一套以HTML、CSS、Javascript前端基礎建設，並整合網站常會使用到的元素：輪播、彈出視窗、網格系統、表單...等，讓前端可以更快速的進行開發。需要調整的地方，也能藉由CSS、JS修改，省力又自由。
六角學院有翻譯整個Bootstrap的文件，都有詳細說明如何使用，對學習上很有幫助！

而Bootstrap5與過去的版本最大的差別就是離開了對JQuery的依賴，過去的Bootstrap是很依賴JQuery，造成整包檔案太過巨大，5之後終於改成原生Javascript，改善了很多問題。

加入Bootstrap到網頁中

使用Bootstrap有很多方法，我以靜態網站、使用CDN為例：

設定響應式中繼標籤

<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap CSS

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

Bootstrap JS

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

Popper.js(遇到特定元件才需要）

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.1/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>

Bootstrap文件中有直接給予範本，如果不知道如何開始，可以直接複製使用。
Bootstrap文件

常用語法

加入Bootstrap後，就可以在開發過程中使用Bootstrap語法啦！Bootstrap有容器（container)的機制，另外如Day18. RWD介紹，Bootstrap有區分出各螢幕尺寸的斷點。並且，Bootstarp將網頁寬度分成12等分，可以依不同螢幕寬度變換元素佔比，先來了解一下吧！

斷點（Breakpoint)

以下為Bootstrap預設的各斷點，每到斷點時樣式設定就會有所變化：
Breakpoint
(圖片取自六角學院bootstrap5翻譯文件)

容器（Container）

Container的機制就是限制容器內的元素寬度，藉由container className可以使內容居中對齊並兩側留白，每個斷點會對應不同最大寬度，為的是大版設計中控制內容不要太寬，使用留白讓使用者更專注於中間的資訊。當然設計上與設定不同可以藉由CSS調整。

(圖片取自六角學院bootstrap5翻譯文件)

<div class="container">
  <!-- 內容 -->
</div>

以作品集為例：
Container

網格系統（Grid system)

Bootstrap使用CSS Flexbox建立網格系統，將網頁寬度分為12等分，並利用網格設定元素的寬度佔比。
基本網格寫法：

(圖片取自六角學院bootstrap5翻譯文件)

  <div class="row"><!--外層包row 表示中間的內容會在同一區塊，超出寬度會換行-->
    <div class="col"><!--每個col平均分配空間，這裡有三個，所以每個col佔4/12(也就是33.33%)-->
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>

你也可以加上數字，剛剛有說Bootstrap將網頁分成12等份，後面的數字可以填入1~12，設定col佔的比例：
網格系統
(圖片取自六角學院bootstrap5翻譯文件)

  <div class="row">
    <div class="col-3"><!--表示佔3/12的寬度-->
     3/12
    </div>
    <div class="col-6"><!--表示佔6/12的寬度-->
     6/12
    </div>
    <div class="col-3">
      3/12
    </div>
  </div>

當然，你更可以設定在不同斷點下col的佔比，依序是xxl、xl、lg、md、sm、xs：

  <div class="row">
    <div class="col-lg-3 col-md-6">
      大版為4個一排(3/12)，pad版以下為2個一排(6/12)
    </div>
    <div class="col-lg-3 col-md-6">
      大版為4個一排(3/12)，pad版以下為2個一排(6/12)
    </div>
    <div class="col-lg-3 col-md-6">
      大版為4個一排(3/12)，pad版以下為2個一排(6/12)
    </div>
  </div>

以作品集為例：
網格系統